<template>
  <el-tooltip
    v-if="props.type === 'fixed'"
    effect="dark"
    content="下载当前vue文件"
    placement="top-start"
  >
    <div class="btn" @click.stop="gethtmlyes">
      <el-icon class="down-icon"><Download /></el-icon>
    </div>
  </el-tooltip>

  <el-button @click="gethtmlyes" :icon="Download" v-if="props.type === 'button'" type="primary">下载当前vue文件</el-button>
  
</template>
<script lang="ts" setup>
import { getCurrentInstance } from 'vue';
import {Download} from '@element-plus/icons-vue';

const props = defineProps({
  type:{
    type:String,
    default:'fixed' // fixed button
  },
  //未指定则默认下载当前页面
  file:{ 
    type:String,
    default:''
  },
  fileName:{
    type:String,
    default:'vuePage' 
  }
})

const {proxy}:any = getCurrentInstance();

function gethtmlyes() {
  let a = document.createElement('a');
  let url = window.URL.createObjectURL(
    new Blob([proxy.$utils.filterVueFile(props.file)])
  )
  a.href = url;
  a.download = props.fileName + '.vue';
  a.click();
  window.URL.revokeObjectURL(url);
}

</script>


<style lang="less" scoped>
.btn{
  width: 40px;
  height: 40px;
  line-height: 3em;
  text-align: center;
  border-radius: 40px;
  background-color: var(--el-color-primary);
  cursor: pointer;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;

  .down-icon{
    color: #fff;
    font-size: 20px;
  }
}
.btn:hover{
  transition: 0.3s;
  opacity: 0.9;
}
</style>